<template>
  <div class="home">
    <el-button type="success" @click="state2.dialogFormVisible = true"
      >添加</el-button
    >
    <el-table :data="state.list" border style="width: 100%">
      <el-table-column prop="UserID" label="用户编号" width="180">
      </el-table-column>
      <el-table-column prop="UserName" label="用户姓名" width="180">
      </el-table-column>
      <el-table-column prop="QQ" label="QQ账号"> </el-table-column>
      <el-table-column prop="UserPwd" label="密码"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.UserImage"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-popconfirm
            confirmButtonText="确定"
            cancelButtonText="取消"
            icon="el-icon-info"
            iconColor="red"
            title="确认删除该用户吗？"
            @confirm="handleClick(scope.row)"
          >
            <template #reference>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-popconfirm>
          <!-- <el-button @click="" type="text" size="small"
            >删除</el-button
          > -->
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- :lock-scroll="false" -->
    <!-- v-loading.lock="fullscreenLoading" -->
    <el-dialog title="用户新增" v-model="state2.dialogFormVisible">
      <el-form v-loading.lock="fullscreenLoading" :model="state2.form">
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input
            v-model="state2.form.UserName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="state2.form.UserPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="qq账号" :label-width="formLabelWidth">
          <el-input v-model="state2.form.QQ" autocomplete="off"></el-input>
        </el-form-item>
        <el-upload
          class="upload-demo"
          drag
          :before-upload="uoloaimg"
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">
              只能上传 jpg/png 文件，且不超过 500kb
            </div>
          </template>
        </el-upload>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary" @click="adduser">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, getCurrentInstance, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    let formLabelWidth = ref("90px");
    const fullscreenLoading = ref(false);
    const { state, getUser } = initUser(proxy);
    const { state2, handleClick, adduser, uoloaimg } = Useroperation(
      getUser,
      proxy,
      fullscreenLoading
    );
    onMounted(() => {
      getUser();
    });
    return {
      getUser,
      state,
      state2,
      handleClick,
      adduser,
      uoloaimg,
      formLabelWidth,
      fullscreenLoading,
    };
  },
};
//用户 数据操作
function Useroperation(getUser, proxy, fullscreenLoading) {
  const state2 = reactive({
    form: {
      UserName: "",
      UserPwd: "",
      QQ: "",
      Phone: "",
      Address: "",
      Birthday: "",
      CreateTime: "",
      UserImage: "",
    },
    dialogFormVisible: false,
    addfile: null,
  });

  async function handleClick(item) {
    const { data: res } = await proxy.$http.delete("RemoveInf2", {
      params: { pid: item.UserID },
    });
    // const { data: res } = await proxy.$http.get("RemoveInf", {
    //   params: { pid: item.UserID },
    // });
    console.log(res);
    getUser();
  }

  async function adduser() {
    fullscreenLoading.value = true;
    setTimeout(() => {
      fullscreenLoading.value = false;
      addUserinfo();
    }, 1200);
  }
  async function addUserinfo() {
    const { data: res } = await proxy.$http.post("ADDuser", state2.form);
    console.log(res);
    if (res.status === 200) {
      ElMessage.success({
        message: "新增成功！",
        type: "success",
      });
      getUser();
    }
    state2.form.UserName = "";
    state2.form.UserPwd = "";
    state2.form.QQ = "";
    state2.form.UserImage = "";
    state2.dialogFormVisible = false;
  }
  async function uoloaimg(file) {
    console.log(file);
    var formData = new FormData();
    //创建formdata对象
    formData.append("photo", file);
    const { data: res1 } = await proxy.$http.post("PostUpload", formData);
    console.log(res1.url);
    state2.form.UserImage = res1.url;
  }
  return { state2, handleClick, adduser, uoloaimg };
}
//用户初始化
function initUser(proxy) {
  const state = reactive({
    list: [],
  });

  async function getUser() {
    const { data: res } = await proxy.$http.get("list");
    res.data.forEach((item) => {
      item.UserImage = "http://192.168.3.219:8070" + item.UserImage;
    });
    state.list = res.data;
  }
  return { getUser, state };
}
</script>
